<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件绑定</title>
</head>
<body>
<input type="button" name="" onclick="f()" value="按钮">
<input type="button" id="btn" value="js中绑定">
<input type="button" id="btn2" value="事件监听的方式">
<script type="text/javascript">
  //1、行内绑定事件  标签.onclick事件属性 = "js代码"
  function f() {
    console.log(654);
    alert(123);
  }

  //2、js中通过标签的时间属性绑定
  document.getElementById("btn").onclick = function () {
    console.log("js中通过标签的时间属性绑定");
    alert("js中通过标签的时间属性绑定");
  }
  //可以拆分为以下步骤
  /*function f1() {
    console.log("js中通过标签的时间属性绑定(拆分)");
    alert("js中通过标签的时间属性绑定(拆分)");
  }
  var btn = document.getElementById("btn");
  btn.onclick = f1;*/

  //3、事件监听的方式
  document.getElementById("btn2").addEventListener("click", function () {
    console.log("事件监听的方式");
    alert("事件监听的方式");
  })
</script>
</body>
</html>